<?php
	session_start();
	include_once('../config.php'); 
	include_once('firstlogin.php'); 
	LinkDataBase();
						
	if(!isset($_SESSION['ID']))
		header("Location:../login/index.php");
	
	$Types[] = 'Overview';
	$Types[] = 'Food';
	$Types[] = 'Finance';
	$Types[] = 'Seasonal Missions';
	$Types[] = 'Demographics';
	$Types[] = 'Table of Contents';
?>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>TPN reimagine retail</title>
<script type="text/javascript" src="../js/jquery-2.0.3.js"></script>
<script type="text/javascript" src="../js/modernizr.custom.29473.js"></script>
<script type="text/javascript" src="../js/jquery.dropdown.js"></script>
<script type="text/javascript"
  src='https://www.google.com/jsapi?autoload={"modules":[{"name":"visualization","version":"1","packages":["corechart","table"]}]}'>
</script>
<script type="text/javascript"
  src='https://www.google.com/jsapi?autoload={"modules":[{"name":"visualization","version":"1","packages":["imagechart","table"]}]}'>
</script>
<script type="text/javascript" src="../js/1.10.3/jquery-ui.js"></script>
<script type="text/javascript">
	
	
	$(document).ready(function(){
		 
		var year = $("#year-droplist").text();
		var season = $("#season-droplist").text();
		var seasonAry = new Array();
		
		$("div#dropdown-2 ul.dropdown-menu li:first").attr("class", "active"); 
		seasonAry.push($("div#dropdown-2 ul.dropdown-menu li:first").find("a").text());
		
		$("#year-span").html("<a href='#'>" + $("div#dropdown-1 ul.dropdown-menu li:first").find("a").text() + "</a>::");
		$("#season-span").html("<a href='#'>" + $("div#dropdown-2 ul.dropdown-menu li:first").find("a").text() + "</a>");
		$("#type-span").html("<a href='#'>" + $("div#dropdown-3 ul.dropdown-menu li:first").find("a").text() + "</a>");
		
		//load first.
		$("#content-detail").load('../chart/index.php',
		{'year':year,'season':season,'type':'Overview'});
			
		$(".menu-upload a.menu-upload").click(function(e) {
			$("#content-detail").load('../upload/index.php');
		});
		
		//Logout Pressed.
		$(".menu-logout").click(function(e) {
			
			$( "#dialog-confirm-login" ).dialog({
      		resizable: false,
      		height:160,
      		modal: true,
      		buttons: {
        		"OK": function() {
					location.href = '../login/logout.php';
          			$( this ).dialog( "close" );
				},
				Cancel: function() {
          			$( this ).dialog( "close" );
       	 		}
			},
			open: function (event, ui) {
    			$('#dialog-confirm-login').css('overflow', 'hidden'); //this line does the actual hiding
  			}
			});
		});
			
		//Click object from drop lists.
		$('div#dropdown-1 ul.dropdown-menu li').click(function(e) { 
			var year = $(this).find("a").text();
			$("#year-droplist").text(year);
			
			$.ajax({
				type: 'POST',
				url: "../detail/index.php",
				data: {Year: year},
				success: function(data){
					var response = $(data);
    				var HTML_Season = response.filter("div#dropdown-2").html();
					//Replace html of droplist and restart to set click.
					$("div#dropdown-2").html(HTML_Season);
 					$("div#dropdown-2").bind('click');
					
					//Clean multiple seasons.
    				var FirstSeason = $("div#dropdown-2 ul.dropdown-menu li:first").text();
					$("div#dropdown-2 ul.dropdown-menu li:first").attr("class", "active");
					$("#season-droplist").text(FirstSeason);
					$("#seanson-count").empty();
					$(".overview-links").hide();
					
					//Init Seasons.
					seasonAry = [];
					seasonAry.push(FirstSeason);
					
					//Get season and type.
					var type = $("#type-droplist").text();
					
					//Replace breadcrumb.
					$("#year-span").html("<a href='#'>" + year + "</a>::");
					$("#season-span").html("<a href='#'>" + FirstSeason + "</a>");
					redirect(year, FirstSeason, type, 1);
     			}
    		});
    	});
		
		$(document).on("click","div#dropdown-2 ul.dropdown-menu li",function(e){
			var type = $("#type-droplist").text();
			if((type=="Table of Contents")||(type=="Seasonal Missions"))
			{ 
				$("div#dropdown-2 ul.dropdown-menu li").attr("class", ""); 
				seasonAry = [];
				var countSeason = $("div#dropdown-2 ul.dropdown-menu li.active").length;
				
				//Check multiple season.
				if(countSeason > 1){
					
					$("#season-droplist").text($("div#dropdown-2 ul.dropdown-menu li:first").find("a").text());  
					$("div#dropdown-2 ul.dropdown-menu li:first").attr("class", "active"); 
							
					seasonAry.push($("div#dropdown-2 ul.dropdown-menu li:first").find("a").text());
				
				}else{ 
					
					$(this).attr("class", "active"); 
					$("#season-droplist").text($(this).find("a").text()); 
					
					seasonAry.push($(this).find("a").text());
				}
				
			}
			else
			{
				if($(this).attr("class") == "active")
				{
					$(this).attr("class", "");  
					seasonAry.splice(seasonAry.indexOf($(this).find("a").text()), 1);	
					
					//Check multiple season.
					if($("div#dropdown-2 ul.dropdown-menu li.active").length == 0){
						$("#season-droplist").text($("div#dropdown-2 ul.dropdown-menu li:first").find("a").text());  
						$("div#dropdown-2 ul.dropdown-menu li:first").attr("class", "active"); 
						
						seasonAry.push($("div#dropdown-2 ul.dropdown-menu li:first").find("a").text());
					}else{
						$("#season-droplist").text($("div#dropdown-2 ul.dropdown-menu li.active:first").find("a").text());  
					} 
	 
								
				}
				else
				{
					$(this).attr("class", "active"); 
					$("#season-droplist").text($(this).find("a").text()); 
					
					seasonAry.push($(this).find("a").text());
				} 
				
				var countSeason = $("div#dropdown-2 ul.dropdown-menu li.active").length;
				
				if(countSeason > 1){
					$("#seanson-count").html("+" + countSeason);
					
					if($("#type-droplist").text() == "Finance"){
						$(".overview-links").hide();
					}else{
						$(".overview-links").show();
					}
					
				}else{
					$("#seanson-count").empty();
					$(".overview-links").hide();
				}
			}
			 
			 
			var year = $("#year-droplist").text();
			var type = $("#type-droplist").text();
			var season = seasonAry.join('+'); 
			var page = '1'; 
			
			var seasonNav = "";
			
			for(var key in seasonAry){
				seasonNav += "<a href='#'>" + seasonAry[key] + "</a>::"
			} 
			$("#season-span").html(seasonNav.substring(0, seasonNav.length - 2));
			
			redirect(year, season, type, page);
    	});
		$('div#dropdown-3 ul.dropdown-menu li').click(function(e) { 
			var type = $(this).find("a").text();
			//Adjust arrow location.
			if (type=='Overview')
				$(".bot-arrow3").css("left","28px");
			else if (type=='Food')
				$(".bot-arrow3").css("left","13px");
			else if (type=='Finance')
				$(".bot-arrow3").css("left","23px");
			else if (type=="Seasonal Missions")
				$(".bot-arrow3").css("left","55px");
			else if (type=='Demographics')
				$(".bot-arrow3").css("left","46px");
			else if (type=='Table of Contents')
				$(".bot-arrow3").css("left","55px");
			
			$("#type-droplist").text(type);	
			
			var countSeason = $("div#dropdown-2 ul.dropdown-menu li.active").length;
			
			if(countSeason > 1){ 
				if(type == "Finance"){
					$(".overview-links").hide();
				}else if(type == "Demographics"){
					$(".overview-links").show();
				}
				else if((type == "Table of Contents")||(type == "Seasonal Missions")){
					seasonAry = [];
					$('div#dropdown-2 ul.dropdown-menu li').attr("class", "");  
					$("#seanson-count").empty();
					
					$("#season-droplist").text($("div#dropdown-2 ul.dropdown-menu li:first").find("a").text());  
					$("div#dropdown-2 ul.dropdown-menu li:first").attr("class", "active"); 
					seasonAry.push($("div#dropdown-2 ul.dropdown-menu li:first").find("a").text()); 
					
					$("#season-span").html($("div#dropdown-2 ul.dropdown-menu li:first").find("a").text()); 
					$(".overview-links").hide();
				}else{
					$(".overview-links").show();
					
				}
				
			}else{ 
				$(".overview-links").hide();
			}
			
			var year = $("#year-droplist").text();
			var season = seasonAry.join('+'); 
			var page = '1'; 
			
			$("#type-span").html("<a href='#'>" + type + "</a>");
			
			redirect(year, season, type, page);
 		});
		
		$('.overview-arrow-left,.overview-link-left').click(function(e) { 
			
			var year = $("#year-droplist").text();
			var type = $("#type-droplist").text();
			var season = seasonAry.join('+'); 
			var page = '1'; 
			
			$("#overview-pager").html(page);			
			redirect(year, season, type, page);
			
 		});
		
		$('.overview-arrow-right,.overview-link-right').click(function(e) { 
		
			var year = $("#year-droplist").text();
			var type = $("#type-droplist").text();
			var season = seasonAry.join('+'); 
			var page = '2'; 
			
			$("#overview-pager").html(page);
			redirect(year, season, type, page);
 		});
		
		function redirect(year, season, type, page) {
			console.log(page);
			//Select Type.
			if (type == 'Demographics')
				$("#content-detail").load('../demographics/index.php',
				{'year':year,'season':season,'type':type,'page':page});
			else if ((type == 'Table of Contents')||(type == "Seasonal Missions"))
				$("#content-detail").load('../table/index.php',
					{'year':year,'season':season,'type':type});
			else
				if(seasonAry.length > 1)
					$("#content-detail").load('../chart/pagerIndex.php',
					{'year':year,'season':season,'type':type,'page':page});
				else
					$("#content-detail").load('../chart/index.php',
					{'year':year,'season':season,'type':type});
			
			$("#overview-pager").html(page);				
		}
	});
	
</script>
<link href="../style.css" rel="stylesheet" type="text/css" />
<link href="../css/jquery.dropdown.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" /> 
<link rel="stylesheet" type="text/css" href="../css/demo.css" />
<link rel="stylesheet" type="text/css" href="../css/styleAcc.css" />
<style type="text/css">

.browse {

	display: inline-block;

	zoom: 1;

	*display: inline;

	vertical-align: baseline;

	margin: 10px 2px 20px 0px;

	outline: none;

	cursor: pointer;

	text-align: center;

	text-decoration: none;

	font: 14px/100% Arial, Helvetica, sans-serif;

	padding: .5em 2em .55em;

	text-shadow: 0 1px 1px rgba(0,0,0,.3);

	-webkit-border-radius: .5em; 

	-moz-border-radius: .5em;

	border-radius: .5em;

	-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);

	-moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);

	box-shadow: 0 1px 2px rgba(0,0,0,.2);

	width: 278px;

	height: 52px;

	font-size: 24px;

	color: #606060;

	border: solid 1px #b7b7b7;

	background: #fff;

	background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#ededed));

	background: -moz-linear-gradient(top,  #fff,  #ededed);

	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#ededed');

}

.browse:hover {

	text-decoration: none;

	background: #ededed;

	background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#dcdcdc));

	background: -moz-linear-gradient(top,  #fff,  #dcdcdc);

	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#dcdcdc');

}

.browse:active {	

	position: relative;

	top: 1px;

	color: #999;

	background: -webkit-gradient(linear, left top, left bottom, from(#ededed), to(#fff));

	background: -moz-linear-gradient(top,  #ededed,  #fff);

	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#ededed', endColorstr='#ffffff');

}

div#load div.loading{
	position: absolute;
	top: -25px;
	left: 0px;
	width: 100%;
	height: 1024px;
	background-image: url(../images/loading_bg.png);
	z-index: 10;
}
div#load div.loading div.loading-container{
	position: relative;
	margin: 0 auto;
	width: 110px;
	height: 400px;
	margin-top: 400px;
}
div#load div.loading div.loading-container img{
	margin-left: 60px;
}
div#load div.loading h1{
	color:#ffffff;
	font-size: 36px;
	font-family: TradeGothic, Arial, sans-serif;
}

span#seanson-count {
	letter-spacing: 3px;
    margin: 0 3px;
}

#dropdown-2 > ul.dropdown-menu li.active a{
	background-color: #30a3f5;
    color: #FFFFFF;
	border-bottom: 1px solid #FFFFFF;
    cursor: pointer;
}
</style>
</head>

<body>

<?php 
	FirstLoginCheckPressed();
?>

	<div id="dropdown-1" class="dropdown dropdown-tip">
    	<ul class="dropdown-menu">
        <?php			
			LinkDataBase();
			$sql = "SELECT DISTINCT year FROM sheet";
			$result= mysql_query($sql);
			while($row = mysql_fetch_assoc($result))
				echo '<li><a href="#">'.$row['year'].'</a></li>';
		?>
    	</ul>
   	</div>
    
    <div id="dropdown-2" class="dropdown dropdown-tip">
    	<ul class="dropdown-menu">
        <?php 
			
			if (isset($_POST['Year']))
				$sql = "SELECT DISTINCT season FROM sheet WHERE year = ".$_POST['Year']."";
			else
				$sql = "SELECT DISTINCT season FROM sheet";
			$result= mysql_query($sql);
			while($row = mysql_fetch_assoc($result))
				echo '<li><a href="#">'.$row['season'].'</a></li>';
		?>
    	</ul>
    </div>
    <div id="dropdown-3" class="dropdown dropdown-tip">
    	<ul class="dropdown-menu">
        	<?php
				foreach ($Types as $Type)
        			echo '<li><a href="#">'.$Type.'</a></li>';
			?>
    	</ul>
    </div>
<div class="container2">
<div class="div1">

	<div style="float:left">
		<a href="#" data-dropdown="#dropdown-1">
			<button class="top-menu-button"><span id="year-droplist">2013</span><img class="bot-arrow1" src="../images/bot-arrow.png" width="12" height="7"/></button>
		</a>
		<a href="#" data-dropdown="#dropdown-2">
			<button class="top-menu-button"><span id="season-droplist">Spring</span><span id="seanson-count"></span><img class="bot-arrow2" src="../images/bot-arrow.png" width="12" height="7"/></button>
		</a>
		<a href="#" data-dropdown="#dropdown-3">
			<button class="top-menu-button" ><span id="type-droplist">Overview</span><img class="bot-arrow3" src="../images/bot-arrow.png" width="12" height="7" style="left:28px"/></button>
		</a>
	</div>
	<div style="float:right;margin-right:150px;padding-top:15px;">
	  <span class="menu-upload"><a href="#" class="menu-upload"><img src="../images/plus.png" width="20" height="22" align="absmiddle"/> Upload data</a></span>
	  <span class="menu-logout"><a href="#" class="menu-upload"><img src="../images/power.png" width="20" height="20" align="absmiddle"/> Logout</a></span>
	  <span class="menu-seasonal">SEASONAL PULSE</span>
	</div>
  
</div>
    <div class="div2">
      <span class="dashboard-data">DASHBOARD DATA</span>
	  <span class="subheader"> :: 
		<span id="year-span"></span>  
		<span id="season-span"></span> :: 
		<span id="type-span"></span>		
	  </span> 
	</div>
	
	<div class="overview-links" style="display:none;">
		<span class="overview-arrow-left"><a href="#"><</a></span>
		<span class="overview-link-left"><a href="#">Previous</a></span>
		<span class="overview-link"><a href="#"><span id="overview-pager">1</span> of 2</a></span>
		<span class="overview-link-right"><a href="#">Next</a></span>
		<span class="overview-arrow-right"><a href="#">></a></span>
	</div>
	
    <div id="content-detail">
	</div>
	
   
  <div class="content" style="clear: both;margin-top:20px;">
  
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <hr>
    <p><span class="header-bot" style="padding-top: 20px;">SEASONAL PULSE</span></p>
  </div>
<!-- end .container --> 
</div>
<!----- Dialog Confirm ------>
<div id="dialog-confirm-login" title="Alert" hidden="YES">
  <p><span class="ui-icon ui-icon-alert" style="float: left; margin: 0 7px 20px 0;"></span>Logout. Are you sure?</p>
</div>

<!-- LoadingBox -->
<div id="load" hidden="YES">
	<div class="loading" >
		<div class="loading-container">
			<img src="../images/Loader3-1.gif" />
			<h1>Loading...</h1>
		</div>
	</div>
</div>
</body>
</html>

